<template>
  <div class="resource">
    <div class="resource_title">
      <h1>本月家庭水、电、燃气、网络用量监测</h1>
    </div>
    <div class="function-container-back" v-on:click="backToPreviousPage">
      <img src="../../assets/images/house/return.png" alt="Return Icon" class="back-icon">
    </div>
      <el-row class="resource-top">
        <el-col :span="12">
          <div  id="lineChart" style="width: 100%; height: 350px;"></div>
        </el-col>
        <el-col :span="12">
          <div  id="electricLineChart" style="width: 100%; height: 350px;"></div>
        </el-col>
      </el-row>
      <el-row class="resource-bot">
        <el-col :span="12">
          <div  id="gasLineChart" style="width: 100%; height: 350px;"></div>
        </el-col>
        <el-col :span="12">
          <div  id="netLineChart" style="width: 100%; height: 350px;"></div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
export default {

  data() {
    return {
      chart: null
    }
  },
  watch: {

  },
  mounted() {
    this.initChart()
    this.electricLineChart()
    this.netLineChart()
    this.gasLineChart()
  },

  methods: {
    generateRandomData() {
      let data = [];
      for (let i = 0; i < 30; i++) {
        data.push(Math.floor(Math.random() * (3000 - 1000 + 1) + 1000));
      }
      return data;
    },

    otherRandomData() {
      let data = [];
      for (let i = 0; i < 30; i++) {
        data.push(Math.floor(Math.random() * (10 - 1 + 1) + 1));
      }
      return data;
    },

    gasRandomData() {
      let data = [];
      for (let i = 0; i < 30; i++) {
        data.push(Math.floor(Math.random() * (30 - 10 + 1) + 5));
      }
      return data;
    },
    backToPreviousPage() {
      this.$router.go(-1); // 返回上一页
    },
    initChart(){
      let kitchenData = this.generateRandomData();
      let bathroomData = this.generateRandomData();
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('lineChart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月每日用水情况'
        },
        tooltip: {},
        legend: {
          data: ['厨房用水','卫生间用水']
        },
        xAxis:  {
          data:  ['1日',  '2日',  '3日',  '4日',  '5日',  '6日','7日',  '8日',  '9日',  '10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'],
        },
        yAxis: {
          name: '用水量（单位：mL）'
        },
        series: [

          {
            name: '厨房用水',
            type: 'bar',
            data:  kitchenData
          },
          {
            name: '卫生间用水',
            type: 'bar',
            data: bathroomData
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    electricLineChart(){
      let kitchenData = this.otherRandomData();
      let bathroomData = this.otherRandomData();
      let otherData = this.otherRandomData();
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('electricLineChart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月每日用电情况'
        },
        tooltip: {},
        legend: {
          data: ['空调用电','照明用电','其他用电']
        },
        xAxis:  {
          data:  ['1日',  '2日',  '3日',  '4日',  '5日',  '6日','7日',  '8日',  '9日',  '10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'],
        },
        yAxis: {
          name: '用电量（单位：度）'
        },
        series: [

          {
            name: '空调用电',
            type: 'line',
            data:  kitchenData
          },
          {
            name: '照明用电',
            type: 'line',
            data: bathroomData
          },
          {
            name: '其他用电',
            type: 'line',
            data: otherData
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    gasLineChart(){
      let kitchenData = this.gasRandomData();

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('gasLineChart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月每日燃气情况'
        },
        tooltip: {},
        legend: {
          data: ['燃气']
        },
        xAxis:  {
          data:  ['1日',  '2日',  '3日',  '4日',  '5日',  '6日','7日',  '8日',  '9日',  '10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'],
        },
        yAxis: {
          name: '用水量（单位：m³）'
        },
        series: [

          {
            name: '燃气',
            type: 'line',
            data:  kitchenData
          },

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    netLineChart(){
      let bathroomData = this.generateRandomData();
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('netLineChart'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月每日网络流量情况'
        },
        tooltip: {},
        legend: {
          data: ['网络流量']
        },
        xAxis:  {
          data:  ['1日',  '2日',  '3日',  '4日',  '5日',  '6日','7日',  '8日',  '9日',  '10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'],
        },
        yAxis: {
          name: '流量（单位：M）'
        },
        series: [

          {
            name: '网络流量',
            type: 'bar',
            data:  bathroomData
          },

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
  .resource{
    height: 100%;
  }
  .resource-top{
    height: 40%;
    margin-left: 200px;
    margin-top: 100px;
    /deep/ #lineChart{
      background: white;
    }
    /deep/ #electricLineChart{
      background: white;
    }
  }
  .resource-bot{
    height: 40%;
    margin-left: 200px;
    margin-top: 80px;
      /deep/ #gasLineChart{
        background: white;
      }
      /deep/ #netLineChart{
        background: white;
      }
  }


  .function-container-back{
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    font-size: 18px; /* Slightly larger font size */
    color: white;
    cursor: pointer;
  }
  .resource_title
  {
    position: absolute;
    top: -59px;
    left: 768px;
    color: white;
    height: 25px;
  }
</style>
